<template>
  <div class="history">
    <div class="top" v-if="showHistory">
      <div class="history">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="clearhistory" />
      </div>
      <span v-for="(item, index) in historyKeyWord" :key="index">
        <van-tag plain type="default" @click="tagClick(item)">{{
          item
        }}</van-tag>
      </span>
    </div>
    <div class="top">
      <div class="history">
        <h4>热门搜索</h4>
      </div>
      <span v-for="(item, index) in hotKeyword" :key="index">
        <van-tag
          @click="tagClick(item.keyword)"
          plain
          :type="item.is_hot == 1 ? 'danger' : 'default'"
          >{{ item.keyword }}</van-tag
        >
      </span>
    </div>
  </div>
</template>
 
<script>
import { clearHistory } from "@/request/api";
export default {
  name: "",
  props: ["historyKeyWord", "hotKeyword"],
  data() {
    return {
      showHistory: true,
    };
  },
  methods: {
    tagClick(val) {
      // console.log(val);
      this.$emit("tagClick", val);
    },

    //清除历史记录
    clearhistory() {
      clearHistory().then((res) => {
        if (res.errno == 0) {
          this.$toast("清除成功");
          // console.log(res);
          setTimeout(() => {
            this.showHistory = false;
          }, 1000);
        }
      });
    },
  },
};
</script>
 
<style lang="less" scoped>
.top {
  background: #fff;
  padding: 0.07rem 0;
  margin-bottom: 0.15rem;
  // display: flex;
  // flex-direction: column;
  .history {
    display: flex;
    justify-content: space-between;
    padding: 0 0.05rem;
    font-size: 0.16rem;
    margin-bottom: 0.1rem;
    h4 {
      font-weight: normal;
    }
  }
  span {
    padding: 0.01rem 0.05rem;
    margin-bottom: 0.06rem;
  }
}
.down {
  margin-top: 0.15rem;
  background: #fff;
}
</style>